<template>
  <div class="product">
    <!-- 横向排列 -->
    <ul>
        <li v-for="(item,index) in arr" :key="index">
            <span class="ll">浏览量：{{item.visits}}</span>
            <img :src="require('@/assets/' + item.imgURL)" alt="" style="margin-top: 40px">
            <span>{{item.title}}</span>
            
        </li>
    </ul>
    <!-- 选项卡 -->
    <div class="cursor">
        <!-- 按钮区域 -->
        <div class="btnlist">
            <button @click="cx(sp.imgList)">畅销榜</button>
            <button @click="rl(sp.imgList)">热量榜</button>
        </div>
        <!-- 展示区 -->
        <table border="1" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>图片</th>
                    <th>id</th>
                    <th>标题</th>
                    <th>上架时间</th>
                    <th>销售量</th>
                    <th>热度</th>
                </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in sp.imgList" :key="index">
                <td><img :src="require('@/assets/' + item.imgURL)" alt=""></td>
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{zh(item.createTime)}}</td>
                <td>{{item.sale}}</td>
                <td>{{item.hot}}</td>
            </tr>
            </tbody>

        </table>
    </div>
  </div>
</template>

<script>
import sp from "@/assets/sp.js"
export default {
    data(){
        return{
            sp,
            x:true,
            y:true,
        }
    },
    computed:{
        chuza(){
            return sp.imgList.filter(item=>item.grounding)
        },
        arr(){
            return[...this.chuza]
            .sort((a,b)=>b.visits-a.visits)
            .slice(0,5)
        }
    },
    methods:{
        zh(time){
            let data=new Date(time*1000);
            return data=data.toLocaleString();
        },
        cx(sj){
            this.x=false
            this.y=false
            if(this.x==false){
                return sj.sort((str1,str2)=> str2.sale - str1.sale).slice(0,9)
            }
        },
        rl(sj){
            this.y=true
            this.x=true
            if(this.y==true){
                return sj.sort((str1,str2)=> str2.hot - str1.hot).slice(0,9)
            }
        },

    }
}
</script>

<style scoped>
.product{
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;
}
.product .ll{
    position: absolute;
    left: 55px;
    top: -8px;
    color: yellow;
    margin-bottom: 5px;
}
.product ul{
    width: 95%;
    height: 210px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between; 
    align-items: center;
}
.product ul li{
    width: 19%;
    height: 100%;
    background-color: rgba(254, 154, 54, 0.7);
    text-align: center;
    position: relative;
}
.product ul li aside{
    position: absolute;
    right: 0;
    top: 0;
}
.product ul li img{
    width: 85%;
    height: 60%;
    margin-top: 20px;
}
.product ul li span{
    display: block;
    width: 100%;
    margin-top: 8px;
}
.product .cursor{
    width: 95%;
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(254, 154, 54, 0.7);
}
.product .cursor .btnlist{
    width: 100%;
    overflow: hidden;
    border-bottom: 2px solid white;
}
.product .cursor .btnlist button{
    border: none;
    background-color: rgba(254, 154, 54, 0.7);
    border: 1px solid rgb(254, 154, 54);
    color: white;
    width: 200px;
    height: 50px;
}
.product .cursor .btnlist button.active{
    background-color: white;
    color: orange;
    border: 1px solid gold;
}
.product table tbody img{
    width: 80px;
    height: 80px;
}
.product .cursor table{
    width: 100%;
    text-align: center;
}
</style>